<!--
 * @Author: your name
 * @Date: 2020-04-03 18:10:54
 * @LastEditTime: 2020-04-17 14:44:37
 * @LastEditors: your name
 * @Description: In User Settings Edit
 * @FilePath: \v1.0.0\pages\addressBook\index\index.vue
 -->
<template>
  <view class="container">
    <view class="ly-search">
      <input v-model="filterText" placeholder="输入关键字进行过滤" />
    </view>
    <ly-tree
      :ready="ready"
      :tree-data="data"
      node-key="id"
      childVisibleForFilterNode
      showNodeIcon
      :props="defaultProps"
      default-expand-all
      :filter-node-method="filterNode"
      ref="tree"
      @node-click="handleNodeClick"
    ></ly-tree>
  </view>
</template>

<script>
import LyTree from "@/components/other-com/ly-tree/ly-tree.vue";
import { queryAddressBook } from "@/pages/addressBook/interface.js";
import { navigate } from "@/common/framework";

export default {
  components: {
    LyTree
  },
  data() {
    return {
      ready: false,
      filterText: "",
      data: [],
      defaultProps: {
        children: "children",
        label: "title",
        icon: "avatar"
      }
    };
  },
  onPullDownRefresh() {
    this.getAddressBookData();
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  created() {
    this.getAddressBookData();
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    handleNodeClick(obj) {
      if (obj && obj.data && obj.data.type == "user") {
        navigate.gotoPage("/pages/addressBook/detail/detail?id=" + obj.data.id);
      }
    },
    async getAddressBookData() {
      let params = {};
      let Res = await queryAddressBook(params);
      this.ready = true;
      uni.stopPullDownRefresh();
      if (Res && Res.success) {
        this.data = Res.result;
      } else {
        uni.showToast({
          icon: "none",
          title: Res.message || "保存失败~！"
        });
      }
    }
  }
};
</script>

<style  lang="scss">
.container {
  min-height: 88vh;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding-bottom: env(safe-area-inset-bottom);
}
.ly-search {
  margin: 0 30rpx;
  padding-top: 40rpx;
  padding-bottom: 15rpx;
  border-bottom: 1px solid #ededed;
}
.ly-tree {
  padding-top: 0;
}
</style>
